<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-button type="primary" @click="handleAdd" style="width: 90px">新增</el-button>
    </el-form>
    <!-- 表格数据 -->
    <el-table :key="Math.random()" v-loading="loading" :data="railList" height="58vh" border>
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="工区" prop="workArea" min-width="80" />
      <el-table-column label="桥隧涵名称" prop="btcName" min-width="80" />
      <el-table-column label="中心里程" prop="centerMileage" min-width="80" />
      <el-table-column label="全长" prop="totalLength" min-width="80" />
      <el-table-column label="线路名称" prop="railwayName" min-width="80" />
      <el-table-column label="行别" prop="progressType" min-width="80" />
      <el-table-column label="设备名称" prop="equipmentName" min-width="80" />
      <el-table-column label="维修内容" prop="maintainContent" min-width="80" />
      <el-table-column label="影响范围" prop="influenceScope" min-width="80" />
      <el-table-column label="维修类型" prop="maintainType" min-width="80" />
      <el-table-column label="未排期的维修数量" prop="unscheduledMaintainNumber" min-width="80" />
      <el-table-column label="未排期的维修数量单位" prop="maintainNumberUnit" min-width="80" />
      <el-table-column label="未排期的维修地段" prop="unscheduledMaintainDistrict" min-width="80" />
      <el-table-column label="地段区域" prop="districtNumber" min-width="80" />
      <el-table-column label="维修优先级" prop="maintainPriority" min-width="80" />
      <el-table-column label="建议维修时间" prop="maintainTime" min-width="80" />
      <el-table-column label="数据分类" prop="type" min-width="80" />
      <el-table-column label="维修或施工" prop="constructionType" min-width="80">
        <template #default="scope">
          <span>{{ ["维修", "施工"][scope.row.constructionType] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="80">
        <template #default="scope">
          <div class="buttontext">
            <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage4"
      :page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      background="background"
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" v-model="open" width="1300px" append-to-body>
      <el-form ref="userRef" :model="form" :rules="rules" label-width="120px" :inline="true">
        <el-form-item label="工区" prop="skylightDate">
          <el-input v-model="form.workArea" placeholder="请输入工区" @focus="focusWorkArea('单位', 1)" style="width: 180px" />
        </el-form-item>
        <el-form-item label="桥隧涵名称" prop="planDates">
          <el-select v-model="form.btcId" placeholder="请选择" style="width: 180px" @change="getbtc">
            <el-option v-for="item in btcNameList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="中心里程" prop="centerMileageNumber">
          <el-input v-model="form.centerMileageNumber" placeholder="请选择" style="width: 180px" />
        </el-form-item>
        <el-form-item label="全长" prop="totalLength">
          <el-input v-model="form.totalLength" placeholder="请选择" style="width: 180px" />
        </el-form-item>
        <el-form-item label="线路名称" prop="railwayName">
          <el-select v-model="form.railwayId" placeholder="请选择" style="width: 180px">
            <el-option v-for="item in railwayNameList" :key="item.id" :label="item.railwayName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行别" prop="progressType">
          <el-select v-model="form.progressId" placeholder="请选择" style="width: 180px">
            <el-option v-for="item in progressTypeList" :key="item.id" :label="item.progressType" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="equipmentName">
          <el-input v-model="form.equipmentName" placeholder="请选择" style="width: 180px" />
        </el-form-item>
        <el-form-item label="维修内容" prop="maintainContent">
          <el-select v-model="form.maintainContentId" placeholder="请选择" style="width: 180px">
            <el-option v-for="item in maintainContentList" :key="item.id" :label="item.maintainContent" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影响范围" prop="influenceScope">
          <el-input v-model="form.influenceScope" placeholder="请选择" style="width: 180px" />
        </el-form-item>
        <el-form-item label="维修类型" prop="maintainType">
          <el-select v-model="form.maintainId" placeholder="请选择" style="width: 180px">
            <el-option v-for="item in maintainTypeList" :key="item.id" :label="item.maintainType" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="未排期的维修数量" prop="unscheduledMaintainNumber">
          <el-input v-model="form.unscheduledMaintainNumber" placeholder="请选择" style="width: 180px" />
        </el-form-item>
        <el-form-item label="未排期的维修数量单位" prop="maintainNumberUnit">
          <el-input v-model="form.maintainNumberUnit" placeholder="请选择" style="width: 180px" />
        </el-form-item>
        <el-form-item label="未排期的维修地段" prop="unscheduledMaintainDistrict">
          <el-input v-model="form.unscheduledMaintainDistrict" placeholder="请选择" style="width: 180px" />
        </el-form-item>
        <el-form-item label="地段区域" prop="districtNumber">
          <el-input v-model="form.districtNumber" placeholder="请选择" style="width: 180px" />
        </el-form-item>
        <el-form-item label="维修优先级" prop="maintainPriority">
          <el-select v-model="form.maintainPriorityId" placeholder="请选择" style="width: 180px">
            <el-option v-for="item in maintainPriorityList" :key="item.id" :label="item.maintainGrade" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建议维修时间" prop="maintainTime">
          <el-date-picker
            style="width: 180px"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="form.maintainTime"
            type="date"
            placeholder="请选择日期"
          />
        </el-form-item>
        <el-form-item label="数据分类" prop="type">
          <el-select v-model="form.typeId" placeholder="请选择" style="width: 180px">
            <el-option v-for="(item, index) in ['桥隧涵保养修', '线路保养修', '信号保养修']" :key="item" :label="item" :value="index + 1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修或施工" prop="type">
          <el-select v-model="form.constructionType" placeholder="请选择" style="width: 180px">
            <el-option v-for="(item, index) in ['维修', '施工']" :key="item" :label="item" :value="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="工区" v-model="isShowWorkArea" width="350px" append-to-body draggable>
      <tree @handleCheckTree="handleCheckTree" v-if="isShowWorkArea"></tree>
    </el-dialog>
  </div>
</template>

<script setup name="Bridge">
import {
  listbridge,
  selectProDictionariesRailwayList,
  listprogresstype,
  listMaintain,
  listMaintaintype,
  listMaintaingrade,
  selectProIntelligentRecommendationPoolList,
  insertProIntelligentRecommendationPool,
  editProIntelligentRecommendationPool,
} from "@/api/main/dataDictionary.js";
import { ElMessage } from "element-plus";
import { reactive, ref, toRefs } from "vue";
import tree from "@/components/planModle/tree.vue";
const { proxy } = getCurrentInstance();
const title = ref("新增");
const loading = ref(true);
const open = ref(false);

const data = reactive({
  railList: [],
  selecttabList: [],
  form: {},
  queryParams: {
    pageNumber: "1",
    pageSize: "10",
    skylightDate: "",
  },
  rules: {
    maintainTime: [{ required: true, message: "时间不能为空", trigger: ["blur", "change"] }],
  },
  btcNameList: [],
  railwayNameList: [],
  progressTypeList: [],
  maintainContentList: [],
  maintainTypeList: [],
  maintainPriorityList: [],
});

const {
  queryParams,
  railList,
  selecttabList,
  form,
  rules,
  btcNameList,
  railwayNameList,
  progressTypeList,
  maintainContentList,
  maintainTypeList,
  maintainPriorityList,
} = toRefs(data);

//分页
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const total = ref(10);
const handleSizeChange = (val) => {
  pageSize4.value = val;
  getList();
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  currentPage4.value = val;
  getList();
  console.log(`current page: ${val}`);
};

/** 查询列表 */
function getList() {
  loading.value = true;
  queryParams.value.pageNum = currentPage4.value;
  queryParams.value.pageSize = pageSize4.value;
  selectProIntelligentRecommendationPoolList(queryParams.value).then((res) => {
    if (res.code == 200) {
      data.railList = res.data;
      total.value = res.count;
    }
    loading.value = false;
  });
}
getList();
function getData() {
  listbridge().then((res) => {
    if (res.code == 200) {
      btcNameList.value = res.data;
    }
  });
  selectProDictionariesRailwayList().then((res) => {
    if (res.code == 200) {
      railwayNameList.value = res.data;
    }
  });
  listprogresstype().then((res) => {
    if (res.code == 200) {
      progressTypeList.value = res.data;
    }
  });
  listMaintain().then((res) => {
    if (res.code == 200) {
      maintainContentList.value = res.data;
    }
  });
  listMaintaintype().then((res) => {
    if (res.code == 200) {
      maintainTypeList.value = res.data;
    }
  });
  listMaintaingrade().then((res) => {
    if (res.code == 200) {
      maintainPriorityList.value = res.data;
    }
  });
}
getData();

/** 重置操作表单 */
function reset() {
  form.value = {
    id: "",
    organizationId: "",
    workArea: "",
    btcId: "",
    btcName: "",
    centerMileage: "",
    centerMileageNumber: "",
    totalLength: "",
    railwayId: "",
    railwayName: "",
    progressId: "",
    progressType: "",
    equipmentName: "",
    maintainContentId: "",
    maintainContent: "",
    influenceScope: "",
    maintainId: "",
    maintainType: "",
    unscheduledMaintainNumber: "",
    maintainNumberUnit: "",
    unscheduledMaintainDistrict: "",
    districtNumber: "",
    maintainPriorityId: "",
    maintainPriority: "",
    maintainTime: "",
    typeId: "",
    constructionType: 0,
    type: "",
  };
  proxy.resetForm("userRef");
}

function getbtc() {
  btcNameList.value.forEach((item) => {
    if (form.value.btcId == item.id) {
      form.value.centerMileageNumber = item.centerMileage;
      form.value.totalLength = item.overallLength;
      form.value.btcName = item.name;
    }
  });
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增";
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["userRef"].validate((valid) => {
    if (valid) {
      railwayNameList.value.forEach((item) => {
        if (form.value.railwayId == item.id) {
          form.value.railwayName = item.railwayName;
        }
      });
      progressTypeList.value.forEach((item) => {
        if (form.value.progressId == item.id) {
          form.value.progressType = item.progressType;
        }
      });
      maintainContentList.value.forEach((item) => {
        if (form.value.maintainContentId == item.id) {
          form.value.maintainContent = item.maintainContent;
        }
      });
      maintainTypeList.value.forEach((item) => {
        if (form.value.maintainId == item.id) {
          form.value.maintainType = item.maintainType;
        }
      });
      maintainPriorityList.value.forEach((item) => {
        if (form.value.maintainPriorityId == item.id) {
          form.value.maintainPriority = item.maintainGrade;
        }
      });
      ["桥隧涵保养修", "线路保养修", "信号保养修"].forEach((item, index) => {
        if (form.value.typeId == index + 1) {
          form.value.type = item;
        }
      });
      if (form.value.taskId) {
        editProIntelligentRecommendationPool(form.value).then((res) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        insertProIntelligentRecommendationPool(form.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
function selectiontab(row) {
  selecttabList.value = row;
}
// 同步更新
function handleQuery() {}
// 查看参数
function handleUpdate(rows) {
  form.value = JSON.parse(JSON.stringify(rows));
  open.value = true;
  title.value = "修改";
}

//工区
const focusType = ref("");
const focusTypeIndex = ref("");
const isShowWorkArea = ref(false);
function focusWorkArea(type, num, index) {
  focusType.value = num;
  focusTypeIndex.value = index;
  isShowWorkArea.value = true;
}
//树结构的选择单选
function handleCheckTree(data) {
  form.value.workArea = data.organizationFullName;
  form.value.organizationId = data.organizationId;
}
</script>

<style scoped lang="scss">
.divflex {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .leftx {
    width: 45%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    margin-top: 3px;
  }

  .mainz {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
  }

  .rightx {
    width: 45%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    margin-top: 3px;
  }
}

.buttontext {
  .el-button:hover {
    text-decoration: line-through !important;
  }
}

.el-form--inline .el-form-item.formitemcla {
  margin-right: 5px !important;
}
</style>
